import React, {useEffect} from "react";
import {observer} from "mobx-react";
import {Splitter} from "antd";
import Category from "./filter";
import Table from "./Table";
import Form from "./Form";
import Log from "./Log";
import store from "./store";
import productStore from "../base/product/store";
import warehouseStore from "../base/warehouse/store";

export default observer(function () {
  useEffect(() => {
    store.fetchRecords()
    productStore.records.length || productStore.fetchRecords()
    warehouseStore.records.length || warehouseStore.fetchRecords()
  }, [])

  return (
    <React.Fragment>
      <Splitter style={{height: "100%",}}>
        <Splitter.Panel collapsible defaultSize={220} min={180} max={300}>
          <Category/>
        </Splitter.Panel>
        <Splitter.Panel>
          <div style={{paddingLeft: 6}}>
            <Table/>
          </div>
        </Splitter.Panel>
      </Splitter>
      {store.formVisible && <Form/>}
      {store.logVisible && <Log/>}
    </React.Fragment>
  )
})